<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台系统管理中心</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/base.css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/platform.css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/easyUI/easyui.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/jquery/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/jquery/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/easyUI/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/main.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/plugins/layer/2.4/layer.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/plugins/layer/2.4/LayConstant.js"></script>
</head>
<body>
<div class="container">
    <div id="pf-hd">
        <div class="pf-logo">
            <h1><a href="${pageContext.request.contextPath}/">Kinglone</a></h1>
            <h6>${logion.paramValue}</h6>
        </div>
        <div class="pf-user">
            <div class="pf-user-photo">
                <img style="width: 40px;height: 40px;" src="${pageContext.request.contextPath}/images/main/lcl.jpg" alt="">
            </div>
            <h4 class="pf-user-name ellipsis">${user.likename}</h4>
            <i class="iconfont xiala">&#xe607;</i>
            <div class="pf-user-panel">
                <ul class="pf-user-opt">
                    <li>
                        <a href="javascript:;">
                            <i class="iconfont">&#xe60d;</i>
                            <span class="pf-opt-name">用户信息</span>
                        </a>
                    </li>
                    <li id="exit">
                        <a href="javascript:exit();">
                            <i class="iconfont">&#xe60e;</i>
                            <span class="pf-opt-name" onclick="exit()">退出</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="pf-bd">
        <div id="pf-sider">
            <h2 class="pf-model-name">
                <span class="iconfont">&#xe64a;</span>
                <span class="pf-name">信息系统</span>
                <span class="toggle-icon"></span>
            </h2>
            <!-- 展示系统左侧权限树  -->
            <ul class="sider-nav" id="sider-nav">
                <li>
                    <ul class="sider-nav-s">
                        <li><a href="javascript:addPanel('1' ,'/user/selectUser.jspx','用户管理');">用户管理</a></li>
                        <li><a href="javascript:addPanel('2' ,'/article/selectArticle.jspx','文章管理');">文章管理</a></li>
                        <li><a href="javascript:addPanel('3' ,'/classify/selectClassify.jspx','分类管理');">分类管理</a></li>
                        <li><a href="javascript:addPanel('4' ,'/comment/comment.jspx','评论管理');">评论管理</a></li>
                        <li><a href="javascript:addPanel('5' ,'/music/musicPage.jspx','音乐管理');">音乐管理</a></li>
                        <li><a href="javascript:addPanel('6' ,'/friendlinks/friendlinks.jspx','友情链接');">友情链接</a></li>
                        <li><a href="javascript:addPanel('7' ,'/loginlog/loginlog.jspx','登录日志');">登录日志</a></li>
                        <li><a href="javascript:addPanel('8' ,'/systemParam/systemParam.jspx','系统参数配置');">系统参数配置</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- 面板 -->
        <div id="pf-page">
            <div class="easyui-tabs" id="tt" style="width:100%;height:100%;">
                <div title="当前用户" id="user" style="padding:10px 5px 5px 10px;">
                    <iframe class="page-iframe" src="${pageContext.request.contextPath}/user/home.jspx" frameborder="no" border="no" height="100%" width="100%" scrolling="yes"></iframe>
                </div>
            </div>
        </div>
    </div>
    <div id="pf-ft">
        <div class="system-name">
            <i class="iconfont">&#xe6fe;</i>
            <span>${leftFooter.paramValue}</span>
        </div>
        <div class="copyright-name">
            <!-- <span>Copyright&nbsp;©&nbsp;2015&nbsp;-&nbsp;2016&nbsp;kinglone-分享知识，传递希望&nbsp;版权所有</span> -->
            <span>${rightFooter.paramValue}</span>
            <i class="iconfont">&#xe6ff;</i>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#tt').tabs({
            tabHeight: 40,
            onSelect: function (title, index) {
                var currentTab = $('#tt').tabs("getSelected");
                if (currentTab.find("iframe") && currentTab.find("iframe").size()) {
                    currentTab.find("iframe").attr("src", currentTab.find("iframe").attr("src"));
                }
            }
        });
    })

    // 写一个方法往easyUI中添加面板
    function addPanel(id, url, name) {
        name = name.replace(/-/g, "");
        // 判断之前是否已经存在该面板存在就不创建新的面板
        var exist = $('#tt').tabs('exists', name);
        if (exist) {
            // 已经存在就将该面板选中  exist
            $('#tt').tabs('select', name);
            var currentTab = $('#tt').tabs('getTab', name);
            // 刷新一下界面
            if (currentTab.find("iframe") && currentTab.find("iframe").size()) {
                currentTab.find("iframe").attr("src", currentTab.find("iframe").attr("src"));
            }
        } else {

            $('#tt').tabs('add', {
                id: id,
                title: name,
                content: '<div style="width:100%;height:100%;"><iframe class="page-iframe" src="${pageContext.request.contextPath}' + url + '" frameborder="no"   border="no" height="100%" width="100%" scrolling="auto"></iframe></div>',
                closable: true//是否允许关闭
            });
        }
    }

    $(window).resize(function () {
        $('.tabs-panels').height($("#pf-page").height() - 46);
        $('.panel-body').height($("#pf-page").height() - 76)
    }).resize();

    var page = 0,
        pages = ($('.pf-nav').height() / 70) - 1;

    if (pages === 0) {
        $('.pf-nav-prev,.pf-nav-next').hide();
    }
    $(document).on('click', '.pf-nav-prev,.pf-nav-next', function () {
        if ($(this).hasClass('disabled')) return;
        if ($(this).hasClass('pf-nav-next')) {
            page++;
            $('.pf-nav').stop().animate({'margin-top': -70 * page}, 200);
            if (page == pages) {
                $(this).addClass('disabled');
                $('.pf-nav-prev').removeClass('disabled');
            } else {
                $('.pf-nav-prev').removeClass('disabled');
            }
        } else {
            page--;
            $('.pf-nav').stop().animate({'margin-top': -70 * page}, 200);
            if (page == 0) {
                $(this).addClass('disabled');
                $('.pf-nav-next').removeClass('disabled');
            } else {
                $('.pf-nav-next').removeClass('disabled');
            }

        }
    })


    //用户退出
    function exit() {

        window.location = "${pageContext.request.contextPath}/user/userLogout.jspx";

    }
</script>


</body>
</html>